<template>
    <view>
        <view class="list-card-wrapper" @click="goToDetail">
            <view class="top-wrapper">
                <view class="header">
                    <view class="time">晒单时间：{{ item.AddTime }}</view>
                    <view class="status" :class="mapStatus[item.Status].class">{{ mapStatus[item.Status].text }}</view>
                </view>
                <img-list v-if="item.DetailList.length > 0" :list="item.DetailList" @open="goToDetail"/>
            </view>
            <view class="reward">
                <view class="text" v-if="getTotalReward.totalIntegral > 0">预计奖励积分:</view>
                <price v-if="getTotalReward.totalIntegral > 0" :price="getTotalReward.totalIntegral" />
				<view v-if="getTotalReward.totalPrice > 0" class="text" style="padding-left: 24rpx;">预计奖励金额:</view>
				<price v-if="getTotalReward.totalPrice > 0" :price="getTotalReward.totalPrice" />
            </view>
        </view>
    </view>
</template>

<script>
import imgList from "../common/img-list.vue"
import price from "../common/price.vue"

const mapStatus = {
    0: {
        text: "待审核",
        class: "audit",
    },
    1: {
        text: "已通过",
        class: "passed",
    },
    2: {
        text: "已驳回",
        class: "rejected",
    },
}
export default {
    components: {
        imgList,
        price,
    },
	computed:{
		getTotalReward() {
			let total = {
			    totalIntegral: 0,
			    totalPrice: 0
			}
			this.item.DetailList.forEach((res)=>{
				if(res.RewardType==1){
					total.totalIntegral += res.Reward * res.Amount
				}else{
					total.totalPrice += res.Reward * res.Amount
				}
			})
			total.totalIntegral = total.totalIntegral.toFixed(2)
			total.totalPrice = total.totalPrice.toFixed(2)
		    return total
		},
	},
    props: {
        item: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            mapStatus,
        }
    },
    methods: {
        goToDetail() {
            this.easyGoTo(`/pages_me/packet/sunbathing/sunbathing-detail?id=`+this.item.ID)
        },
    },
}
</script>

<style lang="scss">
.list-card-wrapper {
    margin: $size-24;
    background-color: $color-white;
    border-radius: $size-24;
    color: $color-gray-1;

    .top-wrapper {
        padding: 24rpx;
        border-bottom: 1rpx solid #f0f0f0;

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .time {
                font-size: $size-24;
            }

            .status {
                font-size: $size-28;
            }

            .audit {
                color: #f49c36;
            }

            .passed {
                color: #16ad56;
            }

            .rejected {
                color: #f1270c;
            }
        }
    }

    .reward {
        display: flex;
        align-items: center;
        padding: 34rpx 0 32rpx 24rpx;
        font-size: 24rpx;
    }
}
</style>
